<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="jurisdictionData"
      bordered
      :pagination="false"
      rowKey="id"
    >
      <template #index="{ index }">
        {{ index }}
      </template>
      <template #jurisdiction="{ record }">
        <a-tag color="pink" v-if="record.level == 0">等级一</a-tag>
        <a-tag color="red" v-if="record.level == 1">等级二</a-tag>
        <a-tag color="orange" v-if="record.level == 2">等级三</a-tag>
      </template>
    </a-table>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, ref } from 'vue';
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    // 表头（表格依赖）
    const columns = [
      {
        title: '#',
        // 使用插槽渲染序号
        slots: { customRender: 'index' }
      },
      {
        title: '权限名称',
        // 数据
        dataIndex: 'authName',
      },
      {
        title: '路径',
        dataIndex: 'path',
      },
      {
        title: '权限等级',
        dataIndex: 'level',
        slots: { customRender: 'jurisdiction' }
      }
    ];
    const jurisdictionData = ref()
    const getJurisdiction = async () => {
      const { data, meta } = await proxy.$http.get('rights/list')
      jurisdictionData.value = data
      console.log(data, meta);
    }
    onMounted(() => {
      getJurisdiction()
    })
    return {
      jurisdictionData,
      columns
    }
  },
}
</script>